<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="/css/tt.css">
  <link rel="stylesheet" type="text/css" href="./plugins/normalize-css/normalize.css"/>
  <link rel="stylesheet" type="text/css" href="./plugins/yui/cssgrids-min.css"/>
  <link rel="stylesheet" type="text/css" href="./plugins/sui/sui.min.css"/>
  <link rel="stylesheet" type="text/css" href="./plugins/sui/sui-append.min.css"/>
  <link rel="stylesheet" type="text/css" href="./plugins/font-awesome/css/font-awesome.min.css"/>
  <link rel="stylesheet" type="text/css" href="./css/widget-base.css"/>
  <link rel="stylesheet" type="text/css" href="./css/widget-head-foot.css"/>
  <link rel="stylesheet" type="text/css" href="./plugins/bootstrap/dist/css/bootstrap.min.css"/>
  <link rel="stylesheet" type="text/css" href="./css/page-sj-spit-index.css"/>

  <title>自我测试</title>
  <script src="js/vue.js" type="text/javascript"></script>
  <script src="./js/axios-0.18.0.js" type="text/javascript"></script>
  <script src="element-ui/lib/index.js"></script>
</head>
<body>

<div id="app">
  <div style="height:100px;background-color:black;color:white;text-align:center;font-size:35px">
    开&nbsp;&nbsp;&nbsp; 始&nbsp;&nbsp;&nbsp; 答&nbsp;&nbsp;&nbsp; 题
  </div>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <div class="wrapper tag-item">
      <div class="fl left-list">
        <div class="tc-data-list">
          <div class="tc-list">
            <ul class="detail-list" v-for="question in questions">
              <li class="qa-item">
                <div class="fl record">
                  <div class="number">
                    <div class="border answer">
                      <p class="usenum"></p>
                      <p class="zannum">
                        <strong> 题干</strong>
                      </p>
                    </div>
                    <hr/>
                    <div class="border answer">
                      <p class="zannum">
                        <strong>选项</strong>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="info">
                  <p class="text">
                    <b>{{question.subject}}</b>
                  </p>
                  <div class="other">
                    <div class="fl date">
                                        <span>
                                            <el-form-item label="单选题" v-if="question.type == 1">
                                                <el-radio-group v-model="question.id">
                                                    <el-radio v-for="(item,index) in question.questionItemList"
                                                              :key="item.id"
                                                              :label="item.content"
                                                              :name="question.id"
                                                              v-model="checked"
                                                              @change="changeResultRadio(item)">
                                                        {{item.content}}
                                                    </el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                            <el-form-item label="多选题" v-if="question.type == 2">
                                                 <el-checkbox v-for="(item,index) in question.questionItemList"
                                                              :key="item.id"
                                                              :label="item.content"
                                                              :name="question.id"
                                                              v-model="checked"
                                                              @change="changeResultCheckBox(item)">
                                                      {{item.content}}
                                                 </el-checkbox>
                                            </el-form-item>
                                        </span>
                    </div>
                  </div>
                </div>
                <div class="clearfix"></div>
              </li>
            </ul>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">交卷</el-button>
            </el-form-item>
          </div>
        </div>
      </div>
    </div>
  </el-form>
</div>

</body>
</html>
<script>
  /* 脚本中创建对象,处理业务 */
  new Vue({
    el: '#app',
    data: {
      questions: [],
      results: [],
      checked: [],
    },
    methods: {
      /*-------------------------单选多选题处理结构    开始-------------------------
          //1.分情况处理，单选题与多选题处理方式不同
          //2.约定回传的答案格式       单选题由题号与选项组成，多选题由题号和多个选项组成
          {
              questionId:XXXXXXXX,
              answer:mm
          }
          {
              questionId:XXXXXXXX,
              answer:mm,nn
          }
          //3.无论是单选还是多选，最终都是将所有题目的答案结果放置在一个数据中保存（results），整体操作就是为results添加/修改数据
          [{},{},{}]
          //4.操作模式
          每次操作一个题目，先将当前题目对应的questionId在原始results中删除，添加新数据到results中
          [1,1,1]
          单选：加入一个数据，如果之前有这个题目的数据，先删除再添加
          多选：加入一个数据，如果之前有这个题目的数据，先删除再添加
          -------------------------单选多选题处理结构    结束-------------------------*/

      changeResultRadio(item) {
        //输出选中信息
        // alert("当前选项所属题目id："+item.questionId);
        // alert('当前选项id：'+item.id);
        // alert("本次操作前数据结果：" + JSON.stringify(this.results))

        //组织数据（要加入到results中的数据）
        var temp = { "questionId": item.questionId, "answer": item.id };
        //alert(JSON.stringify(temp))

        //删除当前results中已经存在的本题目对应的数据
        this.results = this.results.filter(e => {
          return e.questionId !== item.questionId
        })
        //alert("results[操作前]：" + JSON.stringify(this.results))

        //将本次操作的结果加入到results
        this.results.push(temp);
        //alert("results[操作后]：" + JSON.stringify(this.results))
      },

      changeResultCheckBox(item) {
        /*
        var s = '11,22,33,44';
        x = '33'
        var arr = s.split(",");
        var index = arr.indexOf(x);
        arr.splice(index,1);
        s = arr.join(",");
        alert(s)
        */


        //输出选中信息
        // alert("当前选项所属题目id："+item.questionId);
        // alert("当前选项id："+item.id);
        // alert('当前'+ this.checked);
        // alert("本次操作前数据结果：" + JSON.stringify(this.results))

        var temp = this.results.find(e => {
          return e.questionId === item.questionId
        })

        if (temp == undefined) {
          //当前题目从来未作答过
          temp = { "questionId": item.questionId, "answer": item.id };
        } else {
          if (this.checked) {
            // 添加该答案
            temp.answer = temp.answer + "," + item.id;
          } else {
            //删除该答案
            var arr = temp.answer.split(",");
            var index = arr.indexOf(item.id);
            arr.splice(index, 1);
            temp.answer = arr.join(",");
          }
        }

        //组织数据（要加入到results中的数据）
        // var temp = {"questionId":item.questionId,"answer":item.id};
        // alert(JSON.stringify(temp))

        //删除当前results中已经存在的本题目对应的数据
        this.results = this.results.filter(e => {
          return e.questionId !== item.questionId
        })
        //alert("results[操作前]：" + JSON.stringify(this.results))

        //将本次操作的结果加入到results
        this.results.push(temp);
        //alert("results[操作后]：" + JSON.stringify(this.results))

      },
      submitForm(formName) {
        if (this.results.length != this.questions.length) {
          alert("请检查题目是否全部选择");
          return;
        } else {
          if (window.confirm("确定交卷吗？")) {
            //把json数据转成字符串
            let str = JSON.stringify(this.results);
            //获取localSotrage
            let storage = window.localStorage;
            //发送请求，交卷
            axios.post('/exam/applyPaper', '{"memberId":"' + storage.id + '","results":' + str + '}').then(function (response) {
              //输出提示信息
              alert(response.data.message);
              //发送完请求，跳转到交卷成功页面
              window.open('/index.html', '_self');
            }).catch(function (err) {
              console.log(err)
            });
          }
        }
      },
      findQuestion() {
        let _this = this;
        //4.发送post请求，获取题目信息
        axios.post('/exam/getPaper').then(function (response) {
          //5.得到响应数据
          var res = response.data;
          alert(JSON.stringify(res));
          _this.questions = res.data;
        }).catch(function (err) {
          console.log(err)
        });
      }
    },
    created() {
      this.findQuestion();
    },
  });

</script>





